<!--
 * @Descripttion: 分割线
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-09 14:18:01
 * @LastEditors: GW
 * @LastEditTime: 2021-09-25 14:29:53
-->
<template>
    <section class="show-wrapper">
        <template v-if="data.text != null && data.text != ''">
            <div class="text-box">
                <a-divider>{{data.text}}</a-divider>
            </div>
        </template>
        <template v-else>
            <div class="text-box">
                <a-divider :style="{'border':data.borderWidth + 'px solid ' + data.borderColor}"></a-divider>
            </div>
        </template>

    </section>
</template>

<script>
export default {
    name: 'Texts',
    props: {
        data: {
            type: Object,
            default: {}
        }
    },
    mounted () {
        //组件默认数据
        console.log(this.data);
        let { data } = this;
        let defaultData = {
            title: data.title ? data.title : '分割线',
            text: data.text ? data.text : null,
            borderWidth: data.borderWidth ? data.borderWidth : 1,
            borderColor: data.borderColor ? data.borderColor : '#bbb',
            onEdit: false,
        }
        this.data = Object.assign(data, defaultData);
    }
}
</script>

<style lang="less" scoped>
    .show-wrapper {
        padding: 6px 0px;
        .text-box {
            color: #333;
        }
    }
    .ant-divider-horizontal {
        margin: 4px 0px;
    }
    .ant-divider-horizontal.ant-divider-with-text-center,
    .ant-divider-horizontal.ant-divider-with-text-left,
    .ant-divider-horizontal.ant-divider-with-text-right {
        font-size: 14px;
    }
</style>